<template>
    <div>
    <el-row>
      <el-col :span="20"><div>
        <div style="margin-top: 20px"> 
            <el-button @click="callForm">新增</el-button>
            <el-button @click="callForm">启用</el-button>
            <el-button @click="toggleSelection()">取消选择</el-button>
          </div>
      </div></el-col>

      <el-col :span="24"><div>
        <div style="margin-top: 20px"> 
            <el-table
                 @selection-change="handleSelectionChange"
                :data="tableData"
                border
                stripe
                style="width: 100%">

                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                <el-table-column
                  prop="id"
                  label="ID"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="权限名"
                  width="180">
                </el-table-column>
                
                <el-table-column
                  prop="url"
                  label="url">
                </el-table-column>

                </el-table-column>
                <el-table-column label="操作">
                  <template scope="scope">
                    <el-button
                      size="small"
                      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                      size="small"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
          </div>
      </div></el-col>
    </el-row>


    <div class="block" style="float:right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page.pageNo"
          :page-size="page.pageSize"
          layout="total, prev, pager, next"
          :total="page.count">
        </el-pagination>
      </div>



  <el-dialog :title="addForm.dialogTitle" :visible.sync="addForm.dialogFormVisible">
          <el-form :model="formData" label-position="left">
            <el-form-item label="角色名：" :label-width="addForm.formLabelWidth">
                <el-input v-model="formData.role.name" auto-complete="off"></el-input>
        </el-form-item>
        </el-form>

        <el-row :gutter="20">
            <el-col :span="8">
                <div> 
                    <el-tree
                        show-checkbox
                        ref="tree"
                        :data="menus"
                        :check-strictly="true"
                        :props="defaultProps"
                        node-key="id"
                        :render-content="renderContent"
                        @node-click="handleNodeClick"
                        >
                    </el-tree>
                </div>
            </el-col>
            <el-col :span="16"><div>

                      <div style="margin: 15px 0;"></div>
                      <el-checkbox-group v-model="formData.perms">
                        <el-checkbox v-for="perm in permList" :label="perm.id" :key="perm.id">{{perm.name}}</el-checkbox>
                      </el-checkbox-group>


            </div></el-col>
        </el-row>

        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelFrom" >取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
        </el-dialog>
</div>
</template>
<script>
export default {
        data() {
          return {
            formData:{
              role:{
                name:'',
                status:0
              },
              menus:[],
              perms:[]
            },
            menus:[],
            defaultProps: {
              children: 'subMenu',
              label: 'title'
            },
            permList:[],
            tableData: [],
            addForm:{
                dialogTitle:'新增角色',
                pTitleDisabled:true,
                dialogFormVisible: false,
                subEnterDisabled:false,
                 formLabelWidth: '100px'
            },
            page:{
                count:0,
                pageNo:1,
                pageSize:15,
                search:''
            }

        }
    },
    methods:{
        getCheckedKeys() {
        },
        handleNodeClick(data){
            this.get("/auth/perm/select_by_mid", {mid:data.id}, true, "", (result) => {
                this.permList = result.data;
            });
        },
        getMenu() {
            this.get("/auth/menu/select_all_tree", "", true, "", (result) => {
                this.menus = result.data;
            });
        },
        handleIconClick(ev){
            console.log(ev)
        },
        handleSelectionChange(val){
            console.log(val)
        },
        handleDelete(index, row){
            this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
                //提交数据
                this.post("/auth/role/delete/"+row.id, {}, true, '数据提交中...', (result) => {
                    this.$notify_succ('操作成功')
                    this.init();
                }, true);
            }).catch(() => {
              // this.$notify_succ('已取消删除')
          });

        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);

        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.init(val);
        },
        cancelFrom(){
            this.addForm.dialogFormVisible = false;
        },
        callForm(){
            this.addForm.dialogFormVisible=true;
        },
        submitForm(){
            this.addForm.dialogFormVisible = false;
console.log(this.$refs.tree.getCheckedKeys(false))

            // this.formData.menus = this.$refs.tree.getCheckedKeys(true)
            //提交数据
            console.log(this.formData)
            // this.post("/auth/role/insert", this.formData, true, '数据提交中...', (result) => {
            //     this.$notify_succ('新增成功')
            //     this.init();
            // }, false);
            this.resetForm();
        },
        init() {
            this.get("/auth/perm/select_all", this.page, true, "", (result) => {
                this.tableData = result.data.list;
                this.page.count = result.data.count;
            });
            if(this.menus){
              this.getMenu();
            }
        },
              renderContent(h, {node, data, store}) {
                return (
                    <span >
                              <span>
                                  <i class={node.icon}></i>
                                  &nbsp;&nbsp;
                                  <span>{node.label}</span>
                              </span>
                              </span>
                      ) 
        },
        resetForm(){
            this.formData.name='';
        }
    },
    mounted() {
        this.init();
    }
}
</script>